<template>
  <div>
    <el-card class="box-card">
      <el-button
        class="btn-add"
        @click="handleUpdate()"
        size="mini">
        添加
      </el-button>
    </el-card>
    <el-table ref="productAttrTable"
              :data="list"
              style="width: 100%"
              border>
      <el-table-column type="selection" width="60" align="center"></el-table-column>

      <el-table-column label="属性值编号" width="100" prop="attrValueId" align="center">
      </el-table-column>
      <el-table-column label="属性值" width="100" prop="attrValue" align="center">
      </el-table-column>


      <el-table-column label="排序" width="100" prop="valueSort" align="center">
      </el-table-column>
      <el-table-column label="创建时间" width="100" :formatter="dateFormatter" prop="createTime" align="center">
      </el-table-column>
      <el-table-column label="创建人" width="100" prop="createAdminName" align="center">
      </el-table-column>
      <el-table-column label="更新人" width="100" prop="updateAdminName" align="center">
      </el-table-column>
      <el-table-column label="更新时间" width="100" :formatter="dateFormatter" prop="updateTime" align="center">
      </el-table-column>
      <el-table-column label="是否启用" width="200" prop="valueStatus" align="center">
        <template slot-scope="scope">
          <p>
            <el-radio-group v-model="scope.row.valueStatus" @change="handleDelete(scope.$index, scope.row)">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleUpdate(scope.$index, scope.row)">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form ref="productAttrCatForm":model="attrValueForm" :rules="rules" label-width="120px">
        <el-form-item label="属性值编号" prop="attrValueId" v-show="false">
          <el-input v-model="attrValueForm.attrValueId" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="属性值名称" prop="attrValue">
          <el-input v-model="attrValueForm.attrValue" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm(attrValueForm)">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  import moment from 'moment'
    export default {
        name: "spuAttrValueList",
      data(){
        return{
          list:[],
          valueStatus:true,
          dialogTitle:"",
          dialogVisible:false,
          attrValueForm:{
            attrValueId:'',
            attrValue:'',
          },
          rules: {
            attrValue: [
              {required: true, message: '请输入类型名称', trigger: 'blur'}
            ]
          }
        }
      },
      created() {
        console.log("*********")
        this.getList();
      },
      methods: {

        handleConfirm(attrValueForm){
          if(this.dialogTitle=="添加"){
            this.$axios({
              method: 'post',
              url: 'http://localhost:8101/spuAttrValue/add',
              params: {
                attrValue:attrValueForm.attrValue,
                attrId:this.$route.query.attrId,
                createBy:1,
                updateBy:1
              }
            }).then(result=>{
              this.dialogVisible=false;
              this.getList();
            })
          }else if(this.dialogTitle=="编辑"){
            this.$axios({
              method: 'post',
              url: 'http://localhost:8101/spuAttrValue/amend',
              params: {
                attrValueId:attrValueForm.attrValueId,
                attrValue:attrValueForm.attrValue,
                updateBy:1
              }
            }).then(result=>{
              this.dialogVisible=false;
              this.getList();
            })
          }
        },

        dateFormatter(row, column){
          var date = row[column.property];
          if(date == undefined){return ''};
          return moment(date).format("YYYY-MM-DD HH:mm:ss")
        },
        getList() {
          this.$axios.get("http://localhost:8101/spuAttrValue/findById/"+this.$route.query.attrId,).then(result=>{
            this.list=result.data;
          })
        },
        /*删除*/
        handleDelete(index, row){
          var valueStatus=row.valueStatus==1?1:0;
          console.log(valueStatus)
          this.$axios({
            method: 'post',
            url: 'http://localhost:8101/spuAttrValue/del',
            params: {
              attrValueId:row.attrValueId,
              valueStatus:valueStatus,
              updateBy:1
            }
          }).then(result=>{
            this.getList();
          })
        },
        /*编辑*/
        handleUpdate(index,row){
          this.dialogVisible=true;
          if(row==undefined||row==''){
            this.dialogTitle="添加";
            this.attrValueForm.attrValueId='';
            this.attrValueForm.attrValue='';
          }else{
            this.dialogTitle="编辑";
            this.attrValueForm.attrValueId=row.attrValueId;
            this.attrValueForm.attrValue=row.attrValue;
          }
        },

      }
    }

</script>

<style scoped>

</style>
